Unity发布WebGL注意事项以及移动端打开webgl网页

您所在的位置:网站首页 unity web player手机版 Unity发布WebGL注意事项以及移动端打开webgl网页

Unity发布WebGL注意事项以及移动端打开webgl网页

2023-07-19 06:24| 来源: 网络整理| 查看: 265

Unity发布WebGL网页端

Unity发布webGL项目时存在很多的易错点,这些错误点没有统一的规律,因为是跨平台开发,开发过程中需要去解决未知的和已知的报错点,下面就我这两年开发WebGL遇到的问题做一个总结,还有的就是大家常遇到的坑我也进行汇总。

资源导入 :

关键字:顶点、分辨率;

发布了WebGL之后,网页运行有时候发现灯光会变暗,因为WebGL不支持实时光照的问题;

解决方法 :所以我们将光照可以做成LightingMap 使用,可以缓 解这一问题。

一些图片UI会在打包webGL之后在网页中会显示模糊;

解决方法:美术制作UI时候分辨率&比例调整好。

Unity自带的字体,在webGL网页中是显示不出来;

解决方法:手动导入新的字体,比如微软自带的微软雅黑字体。

WebGL的渲染和Unity的渲染差异,部分材质是不可以用的;

解决方法:开发时多做测试,对于显示不出来的材质进行更换&修改Shader。

尽量避免使用第三方插件(有些插件可以解决Bug或者大大提高效率,我们视情况而定)。

场景开发:

关键字:优化、插件

Unity自带的视频播放器在开发webGL时候是不能用的;

解决方法:用AVpro视频插件来代替Unity自带播放器。

场景加载实现异步加载; 解决方法:我们可以通过协程方法来实现异步加载,部分代码:IEnumerator Start()

    {

        AsyncOperation scene = Application.LoadLevelAsync("");

        yield return scene;

        Debug.Log("加载完毕");

    }

对于场景中不同距离的模型我们采用LOD进行场景优化;

LOD:Level Of Details多层次细节,unity中自带的一个组件,在场景中添加&设置即可。

代码模块 :

关键字:信息传递、减少循环

在开发过程中由于WebGL的资源限制,我们要和数据库进行数据传输时候不能直接访问数据库;

解决方法:我们可以通过JS作为中转站来访问,我们可以使用

Application.ExternalCall()来调用,可以传递一些参数和信息。

脚本中不用的代码一定要删除,因为有些代码会产生GCGetcomponent  Gameobject.find()等这些方法尽量少用,而且千万不要放在Update中循环执行Update里面的逻辑尽量不要太复杂

打包设置:

关键字:位置、调试

在Publishing Settings设置里面找到压缩格式 勾选为Gzip;"Enable Exceptions"是异常捕获的一个开关,开发期间可以打开进行调试,当我们最终发布时候要将这个选为None;打包位置要和工程包在同一级;打包的每一级目录必须为全英文,不能出现中文;打包时候,减少包里程序代码量可以在othersetting中启用Strip Engine Code;目前webgl支持的浏览器为火狐、谷歌、Safari浏览器;

WebGL在移动端的应用() 实现方法:

Unity发布webGL后,很多时候我们需要在移动端展示,此时找到UnityLoader.js文件,做下面的修改即可在手机端打开:

compatibilityCheck:function(e,t,r){

    UnityLoader.SystemInfo.hasWebGL?

        UnityLoader.SystemInfo.mobile?

            t()

           :["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?

        :e.popup("Yourbrowse does not support WebGL",[{text:"OK",callback:r}])    },

注意事项:当我们在移动端进行三维模型的展示时,我们在开发过程中需要对模型进行三维动画的录制,通过点触屏幕调用方法即可实现,包括三维模型的全景展示、三维模型局部放大展示、信息调用等等,需要注意的是那些需要点击的按钮或者隐藏按钮的坐标问题,因为发布到webGL手机端时,按钮的实际坐标可能会发生变化;

解决方法:使用锚点来做场景的UI部分

当在手机端打开时,我们要设置webGL自适应屏幕;

解决方法:下面是关键代码



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3